<template>
	<view class="ys">
		<view class="info">
			<view class="infoli">
				<view class="left">
					身份证正面
				</view>
				<view class="right">
					<image :src="certificate.card_front_path || '/static/image/card_front.png'"
						@click="uploadImg('card_front')" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					身份证反面
				</view>
				<view class="right">
					<image :src="certificate.card_back_path || '/static/image/card_back.png'"
						@click="uploadImg('card_back')" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					存折
				</view>
				<view class="right">
					<image :src="certificate.passbook_path || '/static/image/passbook.png'"
						@click="uploadImg('passbook')" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="infoli">
				<view class="left">
					护照
				</view>
				<view class="right">
					<image :src="certificate.passport_path || '/static/image/passport.png'"
						@click="uploadImg('passport')" mode="widthFix">
					</image>
				</view>
			</view>
			<button @click="uploadCertificate" :loading="loading" :disabled="loading">上传证件</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserCertificate,
		uploadCertificate
	} from "@/api/shop.js"
	export default {
		data() {
			return {
				domain: this.$config.websiteUrl,
				loading: false,
				name: '',
				license: '',
				show_license: '',
				store: [],
				need_license: false,
				allow_submit: true,
				text: '',
				range: [],
				industry_id: '',
				certificate: {
					card_front: '',
					card_front_path: '',
					card_back: '',
					card_back_path: '',
					passbook: '',
					passbook_path: '',
					passport: '',
					passport_path: ''
				}
			}
		},
		onLoad() {
			this.getUserCertificate()
		},
		methods: {
			getUserCertificate() {
				getUserCertificate().then(res => {
					if (res.code == 0 && res.data.certificate) {
						this.certificate = res.data.certificate
					}
				})
			},
			uploadCertificate() {
				let that = this
				this.loading = true
				uploadCertificate({
					...that.certificate
				}).then(res => {
					uni.$showMsg(res.msg)
					this.loading = false
					if (res.code == 0) {
						setTimeout(() => {
							that.getUserCertificate()
						}, 1000)
					}
				})
			},
			seeimg(url) {
				let urls = [url]
				uni.previewImage({
					urls
				})
			},
			uploadImg(field) {
				var that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						uni.uploadFile({
							url: that.$config.requestUrl + '/common/upload',
							header: {
								'tokens': uni.getStorageSync('tokens')
							},
							formData: {
								accept: 'image',
							},
							filePath: igmFile[0],
							name: 'UploadFile',
							success: (res) => {
								uni.hideLoading()
								let imgRes = JSON.parse(res.data); //微信和头条支持
								if (imgRes.code == 0) {
									let imgData = imgRes.data
									that.certificate[field] = imgData.id
									that.certificate[field + "_path"] = imgData.path
								} else {
									return uni.$showMsg(imgRes.msg)
								}
							},
							fail(err) {
								uni.hideLoading()
							}
						})
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 15px;
		padding-bottom: 10px;
	}

	.info {
		width: 96%;
		margin: 0px auto;
		box-sizing: border-box;

		button {
			width: 96%;
			height: 41px;
			border-radius: 20px;
			line-height: 41px;
			text-align: center;
			font-size: 15px;
			color: #fff;
			background: linear-gradient(0deg, $uni-bg-color, $uni-bg-color);
			margin: 0 auto;
			margin-top: 20px;
		}

		.infoli {
			display: flex;
			flex-direction: column;
			font-size: 14px;
			border-bottom: 1px solid #eee;
			padding: 18px 10px;
			box-sizing: border-box;
			background: #fff;
			margin-bottom: 10px;
			border-radius: 8px;

			.left {
				font-size: 15px;
				font-weight: bold;
			}

			.right {
				flex: 1;
				margin-top: 20px;

				image {
					width: 100%
				}

				input {
					font-size: 14px;
				}
			}
		}
	}
</style>